<template>
  <div>
    <template v-if="tomorrowState == '0'">
      <template v-if="env === 'mini'">
        <div class="btn__mini">前往巴士管家APP 获得更多抽奖机会</div>
      </template>
      <div v-else class="btn_invite pluse_ani" @click="showInvite">
        邀好友助力 再参加1次
      </div>
    </template>
    <template v-else-if="tomorrowState == '3'">
      <template v-if="env === 'mini'">
        <div class="btn__mini">前往巴士管家APP 获得更多抽奖机会</div>
      </template>
      <div v-else class="btn_end" @click="() => actToast(false)">
        机会已用完
      </div>
    </template>
    <template v-else-if="tomorrowState == '2'">
      <div class="btn_end" @click="() => actToast(true)">
        活动已结束
      </div>
    </template>
  </div>
</template>

<script>
import { activityShare, envFunc, drawCanvas, timeFormat } from "@/utils/util";
import { shareWx } from "@/constant";
import { Toast } from "vant";
import { share } from "@/constant";

const btnTextObj = {
  4: "邀好友助力 再参加1次",
  5: "机会已用完",
  6: "活动已结束",
  7: "前往巴士管家APP获得更多抽奖机会"
};
export default {
  data: function() {
    return {
      btnTextObj,
      correspond: null,
      imgUrl: ""
    };
  },
  computed: {
    tomorrowState() {
      return this.$store.state.mainPage.memberDetail.tomorrowState;
    },
    app() {
      return this.$store.state.app;
    },
    mainPage() {
      return this.$store.state.mainPage;
    },
    env() {
      return this.$store.state.app.env;
    }
  },
  async created() {
    const { tomorrowState } = this;

    if (tomorrowState == "0") {
      const { recordId } = this.mainPage;
      let time = timeFormat(new Date(), "YYYY-M-DD");
      // let shareUrl = `${location.origin}${location.pathname}#/help?r=${recordId}&t=${time}&isskey=1`;
      // let url = encodeURIComponent(shareUrl);
      this.imgUrl = await drawCanvas(
        share,
        {
          accountId: "11",
          // page: `pages/web/web?url=${url}`,
          page: `pages/activities/navA/index`,
          // page: `pages/index/index`,
          // width: '220',
          // scene: `${urlParam}`
          scene: decodeURIComponent(`r=${recordId}&t=${time}`)
        },
        550,
        780
      );
    }

    envFunc(
      () => {},
      () => {
        /*eslint-disable*/
        // let correspond = new Correspond({
        //   systemId: "chebada.com",
        //   groupName: "webview",
        //   notify: false,
        //   userId: this.$route.query.uuid //取url里 uuid参数值
        // });

        // this.correspond = correspond;
        // this.$store.commit("changeCorrespond", correspond);
      }
    );
  },
  destroyed() {
    envFunc(
      () => {},
      () => {
        // this.app.correspond.close();
        // this.correspond.close();
      }
    );
  },
  methods: {
    showInvite() {
      setHmt("home", "invite");

      const { recordId } = this.mainPage;
      const { imgUrl } = this;
      let time = new Date().getTime();
      let shareUrl = `${location.origin}${location.pathname}#/help?r=${recordId}&t=${time}&acte=sharecard&isskey=1`;

      envFunc(
        () => {
          activityShare({
            title: "我正在参与车票报销活动, 给我助个力吧~",
            shareUrl: shareUrl,
            shareImg: shareWx,
            path: `/pages/web/web?url=${encodeURIComponent(shareUrl)}`,
            imgUrl
          });
        },
        () => {
         
        }
      );
    },
    actToast(type) {
      Toast(
        type
          ? "活动已结束，快去围观一下车票故事吧~"
          : "参与机会已用完，快去围观一下车票故事吧~"
      );
    }
  },

  inject: ["pageState"]
};
</script>

<style lang="scss" scoped>
.btn__mini {
  font-size: 31px;

  font-weight: bold;
  color: #353535;
}

.btn_invite {
  width: 454px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  background: linear-gradient(90deg, #fc6142, #f9412c);
  color: #ffffff;
  border-radius: 55px;
  font-size: 34px;
  font-weight: 800;
  margin: 38px auto 0 auto;
}

.btn_end {
  width: 360px;
  height: 93px;
  line-height: 93px;
  text-align: center;
  margin: 0 auto;
  background: #cecece;
  border-radius: 46px;
  font-size: 31px;

  font-weight: bold;
  color: #ffffff;
}
</style>
